<style scoped>
.login {
    width: 100%;
    height: 100%;
}
.title {
    text-align: left;
    padding: 15px;
}
.title  span {
    /* padding: 35px; */
    color: #0058a5;
    font-size: 32px;
    vertical-align: middle;
}
.img {
    /* width: 60px; */
    /* background-image: url(~@/assets/img/logo_ims.png); */
    vertical-align: middle;
}

.login-box {
    width: 100%;
    /* position: static; */
    background-image: url(~@/assets/img/login_bg2.jpg);
    height: 500px;
}
.login-form {
    width: 350px;
    padding: 25px;
    float: right;
    /* position: relative;
    top: 100px; */
    /* right: -100px; */
    background-color: rgba(0, 0, 0, 0.3);
    margin-top: 100px;
    margin-right: 50px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); 
}

.footer {
    bottom: 15px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #0058a5;
    margin-top: 35px;
}

.link {
    display: inline-flex;
    list-style: none;
}
.link li{
    line-height: 32px;
    font-size: 18px;
    color: #0058a5;
    margin-left: 15px;
    margin-right: 15px;
}
</style>

<template>
<div class="login">
    <Row class="title" type="flex" justify="center" align="middle">
        <Col span="16">
            <img :src="src" style="height:32px;  vertical-align: middle;" />
            <span><em>兰州财经大学创新创业训练计划平台</em></span>
        </Col>
        <Col span="8">
            <ul class="link">
                <li><a href="http://www.onstream-cloud.com/" target="_blank">首页</a></li>
                <li><a href="http://www.onstream-cloud.com/project/" target="_blank">项目库</a></li>
                <li><a href="http://www.onstream-cloud.com/notice/" target="_blank">通知公告</a></li>
                <li><a href="http://www.onstream-cloud.com/question/" target="_blank">咨询问答</a></li>
                <li><a href="http://www.onstream-cloud.com/dissertation/" target="_blank">学术论文</a></li>
            </ul>
        </Col>
        <!-- <span class="img">Logo</span> -->
    </Row>
    
    <div class="login-box">
        <div class="login-form">
            <h2 style="margin-bottom: 15px;text-align:center;color:#fff;">
                登陆创新创业训练平台
            </h2>
            <Form ref="formValidate" :model="formValidate"  :rules="ruleValidate" label-position="left">
                <FormItem prop="name" >
                    <Input v-model="formValidate.name" type="text" placeholder="账号">
                        <Icon slot="prepend" type="md-person" />
                    </Input>
                </FormItem>
                <FormItem prop="pwd" >
                    <Input v-model="formValidate.pwd" type="password" placeholder="密码">
                        <Icon slot="prepend" type="md-key" />
                    </Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" size="large" long :loading="modal_loading" @click="handleSubmit('formValidate')">登录</Button>
                </FormItem>
            </Form>
        </div>
    </div>
    <div class="footer">
        <p>技术支持:兰州启源信息技术服务有限公司 &nbsp;&nbsp;&nbsp;&nbsp; 服务电话： 0931-xxxxxxx</p>
        <p>@copyright by 兰州启源信息技术服务有限公司</p>
    </div>
 
</div>
</template>

<script>
import {
  SERVER_CPT_URL
} from '@/api/config';
//  import { getStore} from'@/common/utils'
export default {
  name: 'Login',
  data () {
    return {
      src: require('@/assets/img/logo_ims.png'),
      loginModal: true,
      modal_loading: false,
      captchaUrl: '',
      formValidate: {
        name: '',
        pwd: '',
        captcha: '',
        captchaid: '',
        remember: []
      },
      ruleValidate: {
        name: [{
          required: true,
          message: '请填写用户名',
          trigger: 'blur'
        }],
        pwd: [{
          required: true,
          message: '请填写密码',
          trigger: 'blur'
        },
        {
          type: 'string',
          min: 6,
          message: '密码长度不能小于6位',
          trigger: 'blur'
        }
        ]
        // captcha: [
        //   {
        //     required: true,
        //     message: "请填写验证码",
        //     trigger: "blur"
        //   },
        //   {
        //     type: "string",
        //     min: 6,
        //     max: 6,
        //     message: "长度6位",
        //     trigger: "blur"
        //   }
        // ]
      }
    };
  },
  mounted () {
    // this.SET_HEADERNEED(false)
    // this.SET_MENUNEED(false)
    // this.SET_ISLOGINPAGE(true)
    // this.getCpt()
  },
  methods: {
    handleSubmit (name) {
      // login
      this.$refs[name].validate(valid => {
        this.modal_loading = true;
        setTimeout(() => {
          this.modal_loading = false;
          // this.getCpt()
          if (valid) {
            this.$api.Loginynz(this.formValidate).then(res => {
              console.log(res);
              if (!res.error) {
                this.$Message.success('登录成功!');
                this.$store.commit('SET_TOKEN', res.token);
                this.$router.push('/');
              } else {
                this.$Message.error(res.message);
              }
            });
          } else {
            // this.$Message.error('表单验证失败!');
            this.$Notice.warning({
              title: '登录提示',
              desc: '请输入 用户名/密码 ...'
            });
          }
        }, 2000);
      });
    },
    toRegister () {
      this.$router.push('/register');
    },
    getCpt (params) {
      this.$api.getCpt(params).then(res => {
        if (!res.error) {
          this.formValidate.captchaid = res.cptId;
          this.captchaUrl = SERVER_CPT_URL + res.url;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    resetCpt () {
      this.captchaUrl = this.captchaUrl + '?reload';
    }
  }
};
</script>
